<template>
  <div class="home">
    <el-container>
      <!-- 左边 -->
      <el-aside width="75px" class="lefts">
        <div class="sidebar">
          <div v-for="size in sizeList" :key="size" class="block">
            <el-avatar
              :size="size"
              :src="circleUrl"
              @click="personal"
            ></el-avatar>
            <!-- 个人信息  退出登录 -->
            <div class="personalBox" v-show="isShowPersonal">
              <!-- 头部 -->
              <div class="box"></div>
              <!-- 头像 -->
              <div class="editerBox">
                <div class="editer">
                  <el-avatar
                    :size="50"
                    :src="circleUrl"
                    @click="personal"
                  ></el-avatar>
                </div>
              </div>
              <!-- 姓名 -->
              <div class="name" v-show="model.name">{{model.name}}</div>
              <div class="name" v-show="model.depname">部门：{{model.depname}}</div>
              <div class="name" v-show="model.classname">班级：{{model.classname}}</div>
              <div class="butBox">
                <el-button class="but" @click="quit">退出登录</el-button>
              </div>
              <!-- 账号 -->
              <div class="accountBox">
                <div class="account">
                  <el-avatar
                    :size="20"
                    :src="circleUrl"
                    @click="personal"
                  ></el-avatar>
                  <span class="title">账号</span>
                </div>
                <div class="accountName">{{model.username}}</div>
              </div>
              <!-- 密码 -->
              <div class="accountBox">
                <div class="account">
                  <el-avatar
                    :size="20"
                    :src="circleUrl"
                    @click="personal"
                  ></el-avatar>
                  <span class="title">密码</span>
                </div>
                <div class="accountName click" @click="toSetUp">设置</div>
              </div>
              <!-- 微信 -->
              <div class="accountBox">
                <div class="account">
                  <el-avatar
                    :size="20"
                    :src="circleUrl"
                    @click="personal"
                  ></el-avatar>
                  <span class="title">微信</span>
                </div>
                <div class="accountName click">未绑定</div>
              </div>
            </div>
          </div>
          <div
            :class="tabed === item.url ? 'font' : 'fon'"
            @click="test(item.id, item.url)"
            v-for="item in pids"
            :key="item.id"
          >
            <span :class="tabed === item.url?'fonts icon iconfont '+item.ico:'icon iconfont '+item.ico"></span>
            <p class="p">{{ item.name }}</p>
          </div>
        </div>
      </el-aside>
      <!-- 右边 -->
      <el-container style="padding: 10px" @click="closureInfo">
        <router-view :style="isShowPersonal?'pointer-events: none;':''"></router-view>
      </el-container>
    </el-container>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import router from "../router";
const store = useStore();
const data: any = reactive({
  pids: [],
  isShowPersonal: false,
  // 点击切换
  tabed:'',
  model:{}
});

const { pids, isShowPersonal,tabed,model }: any = toRefs(data);
// 菜单栏数据
pids.value = store.state.pidArr;
data.tabed=pids.value[0].url
// 个人信息
data.model = store.state.model;

// 头像
const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  sizeList: [""] as const,
});
const { circleUrl, sizeList } = toRefs(state);
// 考试
const test = (id: number, url: string) => {
  tabed.value = url;
  router.push(url);
  data.isShowPersonal=false
};
// 点击显示个人信息
const personal = () => {
  data.isShowPersonal = !isShowPersonal.value;
};
// 跳转设置
const toSetUp=()=>{
  tabed.value = '/set';
  router.push('/set');
  data.isShowPersonal=false
}
// 点击退出登录
const quit=()=>{
  sessionStorage.removeItem('token')
  location.reload() 
}
// 点击关闭个人信息
const closureInfo=()=>{
  data.isShowPersonal=false
}
</script>
<style scoped lang="less">
@import url("../static/css/index/index.css");
::v-deep .el-overlay-dialog{
  overflow: hidden !important;
}

</style>